<template>
  <div>
    <div class="menu">
      <!-- 左边 -->
      <div class="menu-left">
        <ul>
          <li class="menu-item" v-for="(item,index) in itemList" :key="index" @click="currentIndex1(index)" :class="{current:index===currentIndex}">
            <p class="text">{{item.name}}</p>
          </li>
        </ul>
      </div>
      <!-- end 左边 -->
      <!-- 右边 -->
      <div class="menu-right" ref="right">
        <ul>
          <li class="cate" v-for="(menu ,index1) in itemList" :key="index1">
            <h4 class="cate-title">{{menu.name}}</h4>
            <ul class="cate-item">
              <li v-for="(menu2,index2) in menu.sub" :key="index2">
                <router-link :to="'/GoodList/' +menu2.id" class="cate-item-wrapper">
                  <div class="cate-item-img">
                    <img :src="menu2.image" alt="">
                  </div>
                  <span>{{menu2.name}}</span>
                </router-link>
              </li>
            </ul>
          </li>
        </ul>
      </div>
      <!-- end 右边 -->
    </div>
  </div>
</template>

<script>
// import BScroll from 'better-scroll'
import BScroll from 'better-scroll'
export default {
  data () {
    return {
      itemList: [],
      currentIndex: 0,
      rightheight: []
    }
  },
  created () {
    this.cate()
  },
  watch: {
    itemList () {
      this.$nextTick(() => {
        this._initBScroll()
        this._initrightheight()
      })
    }
  },
  methods: {
    _initrightheight () {
      const itemArray = []
      let top = 0
      itemArray.push(top)
      const allList = this.$refs.right.getElementsByClassName('cate')
      console.log(allList)
      for (let i = 0; i < allList.length; i++) {
        top += allList[i].clientHeight
        itemArray.push(top)
        // window.scrollTo(100,500);
        // 利用该方法可以到达整个滚动条的那个位置
      }
      console.log(itemArray)
      this.rightheight = itemArray
    },

    _initBScroll () {
      this.leftBScroll = new BScroll('.menu-left', { click: true, mouseWheel: true })
      this.rightScroll = new BScroll('.menu-right', { click: true, mouseWheel: true, probeType: 3 })
      this.rightScroll.on('scroll', pos => {
        const scrollY = Math.abs(pos.y)
        for (let i = 0; i <= this.rightheight.length; i++) {
          if (this.rightheight[i] <= scrollY && this.rightheight[i + 1] >= scrollY) {
            this.currentIndex = i
          }
        }
      })
    },
    cate () {
      this.$indicator.open({ text: '加载中' })
      this.$http.get('category').then(res => {
        this.$indicator.close()
        this.itemList = res.data.data
        console.log(res.data)
      })
    },
    // 左边的按键
    currentIndex1 (index) {
      this.currentIndex = index
      console.log(this.rightScroll)
      const y = -this.rightheight[index]
      // 底层就是根据scrollTo(x,y)
      this.rightScroll.scrollTo(0, y)
    }
  }
}
</script>
<style lang="scss" scoped>
ul {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
.menu {
  display: flex;
  position: absolute;
  text-align: center;
  top: 40px;
  bottom: 50px;
  width: 100%;
  overflow: hidden;

  .menu-left {
    flex: 0 0 80px;
    width: 90px;
    background: #f3f5f7;
    .menu-item {
      height: 55px;
      width: 100%;
      .text {
        width: 100%;
        line-height: 54px;
        margin-bottom: 0;
      }
    }
    .current {
      width: 100%;
      background: #fff;
      .text {
        color: red;
      }
    }
  }
}
.menu-right {
  flex: 1;
  // 剩下的宽度都是由这个分配
  background: rgb(255, 255, 255);
  .cate {
    height: 100%;
    .cate-title {
      margin: 0;
      text-align: left;
      font-size: 14px;
      color: #333;
      font-weight: bold;
      padding: 10px;
    }
    .cate-item {
      padding: 7px 10px 10px;
      display: flex;
      overflow: hidden;
      flex-flow: row wrap;
      li {
        width: 33.3%;
        .cate-item-wrapper {
          .cate-item-img {
            width: 100%;
            img {
              width: 70px;
              height: 70px;
            }
          }
          span {
            display: inline-block;
            font-size: 14px;
            color: #333;
          }
        }
      }
    }
  }
}
</style>
